import React, { Component } from 'react';
import { Carousel } from 'antd';
import 'antd/lib/carousel/style/index.css'
import '../asserts/css/ucenter.css';
import {getBanner} from '../request/uncenter'
import {asyncInitAction } from '../redux/coupon/couponAction'  //获取优惠券
import {getCouponCount} from '../redux/coupon/seletor'
import {connect} from 'react-redux'
class Uncenter extends Component {
   state={
       getBannerList:[], //图片列表
       nickname:''    //用户名
   }
   UNSAFE_componentWillMount()
   {
       let userinfo  = JSON.parse(localStorage.getItem("logindata"));
       this.setState({nickname:userinfo.nickname})
       //获取轮播图数据
       getBanner().then(res=>{
           if(res.code === 200)
           {
              this.setState({getBannerList:res.list})
           }
       });
       this.props.initAction(userinfo.uid)
   }
   //点击退出登录
   outLogin()
   {
       localStorage.removeItem('logindata');
       this.props.history.push("/login")
   }
    render() {
        let {getBannerList,nickname} = this.state;
        return (
            <>
                <div className="page-title">会员中心</div>
                <div className="container">
                    <div className="top">
                        <div className="header">
                            <div className="avatar">
                                <img src="../asserts/imgs/pic/04.png" alt="" />
                            </div>
                            <div className="info">
                                <h3>{nickname}</h3>
                            </div>
                            <div className="tag">每日签到</div>
                        </div>
                        <ul className="info-list">
                            <li>
                                <h3>12</h3>
                                <p>我的收藏</p>
                            </li>
                            <li>
                                <h3>12</h3>
                                <p>浏览记录</p>
                            </li>
                            <li>
                                <h3>&yen;12</h3>
                                <p>我的红包</p>
                            </li>
                            <li>
                                <h3>{this.props.couponCount}</h3>
                                <p><a href="/coupon" style={{color:'white'}}>优惠券</a></p>
                            </li>
                        </ul>
                        <div className="order-info">
                            <div className="title">
                                <h3>我的订单</h3>
                                <span>全部订单 &gt; </span>
                            </div>
                            <ul>
                                <li>
                                    <img src="../asserts/imgs/icon/payment.png" alt="" />
                                    <p>待付款</p>
                                </li>
                                <li>
                                    <img src="../asserts/imgs/icon/delivery.png" alt="" />
                                    <p>待收货</p>

                                </li>
                                <li>
                                    <img src="../asserts/imgs/icon/evaluation.png" alt="" />
                                    <p>评价</p>

                                </li>
                                <li>
                                    <img src="../asserts/imgs/icon/service.png" alt="" />
                                    <p>售后/退款</p>

                                </li>
                            </ul>
                        </div>
                    </div>

                    <div className="banner">
                        <Carousel autoplay>
                            {
                                getBannerList.map(item=>{
                                    return <div key={item.id}>
                                    <img src={this.$staticUrl + item.img} alt="" />
                                    </div>
                                })
                            }
                        </Carousel>                  
                    </div>
                    <ul className="section">
                        <li>地址管理</li>
                        <li>我的钱包</li>
                        <li>我的二维码</li>
                        <li>我的小伙伴</li>
                        <li>0元试用</li>
                        <li onClick={this.outLogin.bind(this)}>退出</li>
                    </ul>
                </div>
            </>
        );
    }
}
const mapStateToProps = state=>{
    //state --- coupon
    return{
        couponList:state.coupon,
        couponCount:getCouponCount(state.coupon)
    }
}
const mapDispathToProps = dispatch => {
    return {
        initAction:(id)=>dispatch(asyncInitAction(id))
    }
}
export default connect(mapStateToProps,mapDispathToProps)(Uncenter);